<template>
	<view class="goodItem flex align-center flex-wrap">
		<view class="goodsBox flex align-center flex-direction" v-for="i in list" @click="todetail(i)">
			<image class="goodImg" mode="aspectFill" lazy-load :src="i.cover_pic"></image>
			<view class="goodText flex flex-direction justify-between">
				<view class="goodsName nodetext2">{{i.name}}</view>
				<view class="flex">
					<view class="couponBox">赠券{{i.give_integral}}</view>
				</view>
				<view class="flex align-center">
					<view style="color: #ff5a5a;">
						<text style="font-size: 24upx;">￥</text>
						<text style="font-size: 32upx;font-weight: bold;">{{i.price}}</text>
					</view>
					<view style="color: #aaa;text-decoration: line-through;margin-left: 20upx;">
						<text style="font-size: 24upx;">￥</text>
						<text style="font-size: 26upx;">{{i.original_price}}</text>
					</view>
				</view>
				<image v-if="i.goods_stock == 0" class="soldOut" src="/static/image/WB/soldOut.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: ''
		},
		data() {
			return {

			}
		},
		methods: {
			todetail(goods) {
				uni.navigateTo({
					url: '/plugins/jimai/goods?type=1&goods_id=' + goods.id
				})
			}
		}
	}
</script>

<style scoped>
	.buyBtn {
		width: 160upx;
		line-height: 50upx;
		text-align: center;
		color: #fff;
		font-size: 26upx;
		border-radius: 10upx;
		background: #3c392a;
	}

	.couponBox {
		font-size: 24upx;
		line-height: 40upx;
		padding: 0 10upx;
		color: #ff5a5a;
		border: 1px solid #ff5a5a;
		border-radius: 6upx;
		margin: 10upx 0;
	}

	.goodsName {
		font-size: 28upx;
		line-height: 40upx;
		max-height: 80upx;
	}

	.goodText {
		width: 100%;
		padding: 20upx;
		position: relative;
	}

	.soldOut {
		position: absolute;
		width: 80upx;
		height: 80upx;
		top: 60upx;
		right: 10upx;
	}

	.goodImg {
		width: 100%;
		height: 345upx;
		border-radius: 10upx 10upx 0 0;
	}

	.goodsBox {
		width: 345upx;
		margin-bottom: 20upx;
		margin-left: 20upx;
		background: #fff;
		border-radius: 20upx;
	}

	.goodItem {
		width: 100%;
		margin-top: 20upx;
	}
</style>
